import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gameplay_flutter/lib_runtime/extension/string_extension/string_text.dart';
import 'package:gameplay_flutter/m_room/constants/room_assets.dart';

class RoomEdit extends StatefulWidget {
  const RoomEdit({Key? key}) : super(key: key);

  @override
  _RoomEditState createState() => _RoomEditState();
}

class _RoomEditState extends State<RoomEdit> {

  int _descLength = 0;
  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Stack(
        alignment: AlignmentDirectional.topCenter,
        children: [
          _editNameAndDesc(context),
          _editRoomAvatar(),
        ],
      ),
    );
  }

  Widget _editNameAndDesc(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(18.r),
          topRight: Radius.circular(18.r),
        ),
      ),
      margin: EdgeInsetsDirectional.only(top: 30.h),
      padding: EdgeInsetsDirectional.symmetric(horizontal: 15.w),
      child: SafeArea(
        child: AnimatedPadding(
          padding: EdgeInsetsDirectional.only(
              bottom: MediaQuery.of(context).viewInsets.bottom),
          duration: const Duration(milliseconds: 150),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Padding(
                    padding: EdgeInsetsDirectional.only(start: 8.w, top: 15.h),
                    child: "Cancel".text(
                      fontSize: 18.sp,
                      color: const Color(0xFFA8A8A8),
                    ),
                  ),
                  const Spacer(),
                  Padding(
                    padding: EdgeInsetsDirectional.only(end: 8.w, top: 15.h),
                    child: "Save".text(
                      fontSize: 18.sp,
                      color: const Color(0xFF8A72FE),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 61.h),
              "Room Name".text(
                fontSize: 14.sp,
                color: const Color(0xFF1B1B1B),
              ),
              SizedBox(height: 8.h),
              Container(
                  height: 38.h,
                  alignment: AlignmentDirectional.centerStart,
                  decoration: BoxDecoration(
                    color: const Color(0xFFF6F6F6),
                    borderRadius: BorderRadius.circular(4.h),
                  ),
                  padding: EdgeInsetsDirectional.only(start: 8.w, end: 8.w),
                  child: TextField(
                      decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: "Name...",
                          hintStyle: TextStyle(
                            fontSize: 16.sp,
                            color: const Color(0xFFA8A8A8),
                          )))),
              SizedBox(height: 16.h),
              "Announcement".text(
                fontSize: 14.sp,
                color: const Color(0xFF1B1B1B),
              ),
              SizedBox(height: 8.h),
              Container(
                  height: 90.h,
                  padding: EdgeInsetsDirectional.only(
                      start: 8.w, end: 8.w, bottom: 7.h),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF6F6F6),
                    borderRadius: BorderRadius.circular(4.h),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: "Room announcement...",
                            hintStyle: TextStyle(
                              fontSize: 16.sp,
                              color: const Color(0xFFA8A8A8),
                            ),
                          ),
                          onChanged: (value) {
                            setState(() {
                              _descLength = value.length;
                            });
                          },
                        ),
                      ),
                      "$_descLength/200".text(
                        fontSize: 12.sp,
                        color: const Color(0xFFC1C1C1),
                      ),
                    ],
                  )),
            ],
          ),
        ),
      ),
    );
  }

  Widget _editRoomAvatar() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Stack(children: [
          Container(
            height: 82.h,
            width: 82.w,
            margin:
                EdgeInsetsDirectional.only(bottom: 6.h, start: 10.w, end: 10.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.h),
              border: Border.all(
                color: Colors.white,
                width: 2.w,
              ),
              image: const DecorationImage(
                image:
                    CachedNetworkImageProvider('https://picsum.photos/200/300'),
                fit: BoxFit.cover,
              ),
            ),
            clipBehavior: Clip.antiAlias,
          ),
          PositionedDirectional(
              end: 0,
              bottom: 0,
              child: Image.asset(
                RoomAssets.roomCoverPhoto,
                width: 32.w,
                height: 32.h,
              ))
        ]),
        SizedBox(height: 7.h),
        "Cover Photo".text(
          fontSize: 16.sp,
          color: const Color(0xFF1B1B1B),
        ),
      ],
    );
  }
}
